<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="application/javascript">
	/*
		#step_01
		- 1단메뉴 레이아웃.
		
		#step_02
		- 2단메뉴 레이아웃.
		
		#step_03
		- 1단메뉴 마우스 동작
		
		#step_04
		- 하이라이터 적용( 빨간거 .. )
	*/
	
	$( document ).ready(function(e) {
			
		var $items_depth1 = $( "#menu .depth_1 .depth_1_list li" );
		var $highlighter = $( "#menu .depth_1 .highlighter"  );
		
		function activeItem( $item ){
			$item.stop();
			$highlighter.stop();
			$item.animate( {  top:-20 }, 200 );
			$highlighter.animate( { left: $item.position().left, width: $item.outerWidth() }, 300 );
		}
		
		function deActiveItem( $item ){
			var tx = $highlighter.position().left + $highlighter.width()/2;
			$item.stop();
			$highlighter.stop();
			$item.animate( {  top:0 }, 200 );
			$highlighter.animate( { width:0, left:tx }, 300 );
		}
		
		$items_depth1.mouseenter( function(){
			activeItem( $( this ) );
		});
		
		$items_depth1.mouseleave( function(){
			deActiveItem( $( this ) );
		});
			
    });
	
</script>

<style>
	*{
		margin:0px;
		padding:0px;
	}
	
	#menu{
		position:absolute;
		left:50px;
		top:50px;
		font-family:Tahoma, Geneva, sans-serif;
	}
	
	#menu .depth_1{
		width:480px;
		height:40px;
		background-color:#666666;
	}
	
	#menu .depth_1 .highlighter{
		left:0px;
		height:40px;
		width:0px;
		position:absolute;
		background-color:#EE0000;
	}
	
	#menu .depth_1 .depth_1_list{
		position:absolute;
		top:10px;
		list-style:none;
		color:#FFFFFF;
		height:20px;
		padding-left:20px;
		padding-right:20px;
		overflow:hidden;
	}
	
	#menu .depth_1 .depth_1_list li{
		height:40px;
		float:left;
		padding-left:20px;
		padding-right:20px;
		position: relative;
	}
	
	#menu .depth_2{
		width:2000px;
		height:20px;
	}
	
	#menu .depth_2 .depth_2_mask{
		height:20px;
	}
	
	#menu .depth_2 .depth_2_mask .depth_2_list{
		font-size:11px;
		height:20px;
		list-style:none;
		background-color:#CCCCCC;
		color:#555555;
		float:left;
		padding-left:20px;
		padding-right:20px;
	}
	
	#menu .depth_2 .depth_2_mask .depth_2_list li{
		height:19px;
		overflow:hidden;
		float:left;
		padding-top:4px;
		padding-left:10px;
		padding-right:10px;
	}
	
	
</style>

<body>
	<div id="menu">
    	<div class="depth_1">
    		<div class="highlighter"></div>
        	<ul class="depth_1_list">
        		<li>Hello<br>Hello</li>
                <li>World<br>World</li>
                <li>Web<br>Web</li>
                <li>App<br>App</li>
                <li>Samo<br>Samo</li>
        	</ul>
        </div>
        <div class="depth_2">
        	<div class="depth_2_mask">
        		<ul class="depth_2_list">
	        		<li>hello-1</li>
	        		<li>hello-2</li>
	        		<li>hello-3</li>
	        	</ul>	
	        	<ul class="depth_2_list">
	        		<li>world-1</li>
	        		<li>world-2</li>
	        	</ul>
	        	<ul class="depth_2_list">
	        		<li>web-1</li>
	        		<li>web-2</li>
	        		<li>web-3</li>
	        		<li>web-4</li>
	        	</ul>
	        	<ul class="depth_2_list">
	        		<li>app-1</li>
	        		<li>app-2</li>
	        		<li>app-3</li>
	        		<li>app-4</li>
	        	</ul>
	        	<ul class="depth_2_list">
	        		<li>samo-1</li>
	        		<li>samo-2</li>
	        		<li>samo-3</li>
	        	</ul>	
        	</div>
        </div>
    </div>
</body>
</html>
